<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :span="7">
        <myCard title="饼图">
          <pieEchart :pieData="pieData"></pieEchart>
        </myCard>
      </el-col>
      <el-col :span="10">
        <myCard title="地图">
          <mapEchart :mapData="mapData"></mapEchart>
        </myCard>
      </el-col>
      <el-col :span="7">
        <myCard title="玫瑰图">
          <roseEchart :roseData="roseData"></roseEchart>
        </myCard>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="content-row">
      <el-col :span="12">
        <myCard title="折线图">
          <lineEchart :lineData="lineData"></lineEchart>
        </myCard>
      </el-col>
      <el-col :span="12">
        <myCard title="柱状图">
          <barEchart :xLabels="xLabels" :barData="barData"></barEchart>
        </myCard>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import myCard from "@/base-ui/card"
// 引入图表组件
import {
  pieEchart,
  roseEchart,
  lineEchart,
  barEchart,
  mapEchart
} from "@/components/page-echarts"
// 地图数据
import { mapData } from "@/components/page-echarts/data/data"

export default defineComponent({
  components: {
    myCard,
    pieEchart,
    roseEchart,
    lineEchart,
    barEchart,
    mapEchart
  },
  setup() {
    // 饼图数据
    const pieData = [
      { value: 1048, name: "Search Engine" },
      { value: 735, name: "Direct" },
      { value: 580, name: "Email" },
      { value: 484, name: "Union Ads" },
      { value: 300, name: "Video Ads" }
    ]
    // 玫瑰图数据
    const roseData = [
      { value: 40, name: "rose 1" },
      { value: 38, name: "rose 2" },
      { value: 32, name: "rose 3" },
      { value: 30, name: "rose 4" },
      { value: 28, name: "rose 5" },
      { value: 26, name: "rose 6" },
      { value: 22, name: "rose 7" },
      { value: 18, name: "rose 8" }
    ]
    // 折线图数据
    const lineData = [140, 232, 101, 264, 90, 340, 250]
    const xLabels = [
      "点",
      "击",
      "柱",
      "子",
      "或",
      "者",
      "两",
      "指",
      "在",
      "触",
      "屏",
      "上",
      "滑",
      "动",
      "能",
      "够",
      "自",
      "动",
      "缩",
      "放"
    ]
    // 柱状图数据
    const barData = [
      220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133,
      334, 198, 123, 125, 220
    ]
    return {
      pieData,
      roseData,
      lineData,
      xLabels,
      barData,
      mapData
    }
  }
})
</script>

<style scoped lang="less">
.content-row {
  margin-top: 10px;
}
</style>
